<template>
  <div style="padding: 0 20px">
    <div class="gutter-example">
      <a-row :gutter="[30, 16]">
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box">
            <span class="spft">行政区指标合计</span>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box">
            <span class="spft">本级行政区指标 </span>
          </div>
        </a-col>
      </a-row>
      <br />
      <a-row :gutter="[30, 16]">
        <a-col class="gutter-row" :span="4">
          <div class="box box-red">
            <span class="box-ft">耕地数量(公顷)</span>
            <span class="box-ft num">{{ count }}</span>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <div class="box box-green">
            <span class="box-ft">水田规模（公顷） </span>
            <span class="box-ft num">{{ count }}</span>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <div class="box box-purple">
            <span class="box-ft"> 粮食产能（万公斤）</span>
            <span class="box-ft num">{{ count }}</span>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <div class="box box-red">
            <span class="box-ft">耕地数量(公顷) </span>
            <span class="box-ft num">{{ count }}</span>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <div class="box box-green">
            <span class="box-ft">水田规模（公顷） </span>
            <span class="box-ft num">{{ count }}</span>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <div class="box box-purple">
            <span class="box-ft"> 粮食产能（万公斤）</span>
            <span class="box-ft num">{{ count }}</span>
          </div>
        </a-col>
      </a-row>
      <br />
      <a-row :gutter="[30, 16]">
        <a-col class="gutter-row" :span="24">
          <div class="gutter-box">
            <span class="spft">下级行政区指标</span>
          </div>
        </a-col>
      </a-row>
      <a-card>
        <div class="card-title">剩余情况统计表</div>
        <a-table
          bordered
          rowKey="id"
          ref="table"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
        >
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script>
import { automaticLogin } from "../../api/api";
export default {
  name: "home",
  data() {
    return {
      count: "0.00",
      columns: [
        {
          title: "行政区",
          dataIndex: "xzq",
          align: "center",
        },
        {
          title: "耕地数量（公顷）",
          dataIndex: "gdgq",
          align: "center",
        },
        {
          title: "水田规模（公顷）",
          dataIndex: "stgm",
          align: "center",
        },
        {
          title: "粮食产能（万公斤）",
          dataIndex: "channeng",
          align: "center",
        },
      ],
      ipagination: {
        current: 1,
        pageSize: 10, // 默认每页显示数量
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return "共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      dataSource: [],
    };
  },
  watch: {
    $route: {
      handler: function (to, from) {
        console.log(to, "tttt");
        this.getusermsg();
        location.reload();

      },
    },
    deep: true,
    immediate: true,
  },
  created() {
    this.getusermsg();
  },
  mounted() {
    // console.log(this.$cookies.get('user'),'user');
    // this.$cookies.remove('token');
  },
  methods: {
    //自动登录
    async getusermsg() {
      const id = this.$route.query.uid;
      const regex =
        /^(?:[A-Za-z0-9+\/]{4})*(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=)?$/;
      if (regex.test(id) == false) {
        const b = this.$Base64.encode(id);
        this.$router.push({
          path: `/admin?uid=${b}`,
        });
      }else
      {
        const b = this.$Base64.decode(id);
        const res = await automaticLogin({uid:b});
        if (res.code == 200) {
            //  this.$cookies.set('token',  this.$Base64.encode(res.result.token) , '1h')
            //  this.$cookies.set("uid", res.result.loginUser.userid,'1h');
            //  this.$cookies.set("user", this.$Base64.encode(JSON.stringify(res.result.loginUser,'1h')));
            localStorage.setItem("token", res.result.token);
            localStorage.setItem("uid", res.result.loginUser.userid);
            localStorage.setItem("user", JSON.stringify(res.result.loginUser));
          } else {
            this.$message.error(res.message);
            localStorage.removeItem("token");
            this.$router.push({ path: "/login" });
          }
      }

    
    },
  },
};
</script>

<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
}
.gutter-example .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  background: #33cabb;
  padding: 6px 0;
  .spft {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
      "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
      "WenQuanYi Micro Hei", sans-serif;
    font-size: 18px;
    color: #ffffff;
    margin-left: 25px;
  }
}
.box {
  padding: 24px 24px;
  height: 100px;
  line-height: 24px;
  color: #fff;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
}
.box-red {
  background-color: #f96868;
}
.box-green {
  background-color: #15c377;
}
.box-purple {
  background-color: #926dde;
}
.box-ft {
  display: block;
  font-size: 14px;
}
.num {
  font-size: 18px !important;
}
.card-title {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  font-size: 15px;
  color: #313944;
  padding-bottom: 10px;
}
</style>
